<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>王先生的家庭保障规划报告</title>
    <link rel="stylesheet" href="./libs/main.css">
    <link rel="stylesheet" href="./build/css/planReport.css">
    <script src="./libs/jquery/jquery-1.8.3.min.js"></script>
    <script src="./libs/vue/vuedev.js"></script>
    <script src="./libs/echarts.min.js"></script>
</head>
<body>
     <div class="wrap">

            <!--loading-->
            <div id="loading"  v-if="loading">
                <div class="load-spinner">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>

      <div class="page-wrapper">

         <div class="floor floor1">
             <div class="line"></div>
             <div class="title">基本信息</div>
             <div class="main">
                 <div class="baseInfo">
                     <div>
                         <div>称呼：</div><div>王先生</div>
                     </div>
                     <div>
                        <div>性别：</div><div>女</div>
                     </div>
                     <div>
                        <div>年龄：</div><div>34岁</div>
                     </div>
                     <div>
                        <div>手机号码：</div><div>13000000000</div>
                     </div>
                     <div>
                        <div>个人年收入：</div><div>20万</div>
                     </div>
                     <div>
                        <div>计划退休年龄；</div><div>60</div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="floor floor2">
            <div class="line"></div>
            <div class="title">家庭保额测算</div>
            <div class="main">
                <div class="tb-title">以生命价值法计算，现阶段家庭成员人寿保险保额如下表所示。（单位：万元)</div>
                <div>
                    <table border="1" style="border-collapse:collapse;">
                        <tr>
                            <th>家庭成员</th>
                            <th>保额测算</th>
                            <th>建议保额</th>
                        </tr>
                        <tr>
                            <td>本人</td>
                            <td>(60 - 32) × 个人年收入 × (1 - 45%)</td>
                            <td>60</td>
                        </tr>
                        <tr>
                            <td>配偶</td>
                            <td>(60 - 32) × 个人年收入 × (1 - 45%)</td>
                            <td>60</td>
                        </tr>
                        <tr>
                            <td>子女1</td>
                            <td>20</td>
                            <td>60</td>
                        </tr>
                    </table>
                </div>
                <div class="tb-title">现阶段家庭成员意外保险保额如下表所示。（单位：万元）</div>
                <div>
                    <table border="1" style="border-collapse:collapse;">
                        <tr>
                            <th>家庭成员</th>
                            <th>保额测算</th>
                            <th>建议保额</th>
                        </tr>
                        <tr>
                            <td>本人</td>
                            <td>(60 - 32) × 个人年收入 × (1 - 45%)</td>
                            <td>60</td>
                        </tr>
                        <tr>
                            <td>配偶</td>
                            <td>(60 - 32) × 个人年收入 × (1 - 45%)</td>
                            <td>60</td>
                        </tr>
                        <tr>
                            <td>子女1</td>
                            <td>20</td>
                            <td>60</td>
                        </tr>
                    </table>
                </div>
                <div class="tb-title">现阶段家庭成员重疾保险保额如下表所示。（单位：万元)</div>
                <div>
                    <table border="1" style="border-collapse:collapse;">
                        <tr>
                            <th>家庭成员</th>
                            <th>保额测算</th>
                            <th>建议保额</th>
                        </tr>
                        <tr>
                            <td>本人</td>
                            <td>(60 - 32) × 个人年收入 × (1 - 45%)</td>
                            <td>60</td>
                        </tr>
                        <tr>
                            <td>配偶</td>
                            <td>(60 - 32) × 个人年收入 × (1 - 45%)</td>
                            <td>60</td>
                        </tr>
                        <tr>
                            <td>子女1</td>
                            <td>20</td>
                            <td>60</td>
                        </tr>
                    </table>
                </div>
                <div class="tb-title">现阶段家庭成员医疗保险保额如下表所示。（单位：万元）</div>
                <div>
                    <table border="1" style="border-collapse:collapse;">
                        <tr>
                            <th>家庭成员</th>
                            <th>医疗照护水平</th>
                            <th>社会医疗保险</th>
                            <th>建议保额</th>
                        </tr>
                        <tr>
                            <td>本人</td>
                            <td rowspan="3">优越水平</td>
                            <td>有</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>配偶</td>
                            <td>有</td>
                            <td>70</td>
                        </tr>
                        <tr>
                            <td>子女1</td>
                            <td>有</td>
                            <td>70</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="floor floor3">
            <div class="line"></div>
            <div class="title">家庭保障缺口</div>
            <div class="main">
                <div>
                    <table border="1" style="border-collapse:collapse;">
                        <tr>
                            <th>被保险人</th>
                            <th>保额测算</th>
                            <th>建议保额</th>
                            <th>建议保额</th>
                            <th>建议保额</th>
                        </tr>
                        <tr>
                            <td rowspan="5">本人</td>
                            <td>社会医疗保险</td>
                            <td colspan="3">有</td>
                        </tr>
                        <tr>
                            <td>人寿保险</td>
                            <td>308</td>
                            <td>120</td>
                            <td>188</td>
                        </tr>
                        <tr>
                            <td>意外保险</td>
                            <td>308</td>
                            <td>120</td>
                            <td>188</td>
                        </tr>
                        <tr>
                            <td>重疾保险</td>
                            <td>308</td>
                            <td>120</td>
                            <td>188</td>
                        </tr>
                        <tr>
                            <td>医疗保险</td>
                            <td>308</td>
                            <td>120</td>
                            <td>188</td>
                        </tr>
                        <tr>
                            <td rowspan="5">配偶</td>
                            <td>社会医疗保险</td>
                            <td colspan="3">有</td>
                        </tr>
                        <tr>
                            <td>人寿保险</td>
                            <td>308</td>
                            <td>120</td>
                            <td>188</td>
                        </tr>
                        <tr>
                            <td>意外保险</td>
                            <td>308</td>
                            <td>120</td>
                            <td>188</td>
                        </tr>
                        <tr>
                            <td>重疾保险</td>
                            <td>308</td>
                            <td>120</td>
                            <td>188</td>
                        </tr>
                        <tr>
                            <td>医疗保险</td>
                            <td>308</td>
                            <td>120</td>
                            <td>188</td>
                        </tr>
                    </table>
                </div>               
            </div>
        </div>
        <div class="floor floor3">
            <div class="line"></div>
            <div class="title">家庭保障方案</div>
            <div class="pie-title">根据保障缺口，我们建议您如下配置家庭保障方案。</div>
            <div>
                <div id="pieCon1" class="pie"></div> 
                <div class="editor-wrap"> 
                    <div>调整保障方案</div>
                </div>
            </div>
            <div>
                <div id="pieCon2" class="pie"></div> 
                <div class="editor-wrap"> 
                    <div>调整保障方案</div>
                </div>
            </div>
        </div>
        <div class="footer-wrap">
            <div>预览客户视图</div>
            <div>发送给客户</div>
        </div>

       </div>
     </div>

    <script src="./build/js/planReport.js"></script>
    <script src="./libs/main.js"></script>
</body>
</html>